<template>
  <div id="app" class="container-fluid">
    <form>
      <div class="form-group">
        <label>名称</label>
        <input type="text" class="form-control" v-model="name" placeholder="名称">
      </div>
      <div class="form-group">
        <label>价格</label>
        <input type="text" class="form-control" v-model="price" placeholder="价格">
      </div>
      <button type="submit" class="btn btn-default" @click.prevent="save">保存</button>
      <button type="submit" class="btn btn-success" @click.prevent="query">查询</button>
    </form>
    <table class="table table-bordered">
      <tr class=".active">
        <th>ID</th>
        <th>名称</th>
        <th>价格</th>
        <th>操作</th>
      </tr>
      <tr v-for="(c,index) in course">
        <td>{{c.id}}</td>
        <td>{{c.name}}</td>
        <td>{{c.price}}</td>
        <td><button type="button" class="btn btn-primary btn-xs edit">修改</button>
          <button type="button" class="btn btn-default btn-xs del" @click="del(c.id,index)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'Clist',
    data() {
      return {
        name: '',
        price: 0,
        course: [{
          "id": 7749,
          "name": "html",
          "price": "999"
        }, {
          "id": 6301,
          "name": "js",
          "price": "555"
        }, {
          "id": 9427,
          "name": "jquery",
          "price": "1000"
        }, {
          "id": 1899,
          "name": "css",
          "price": "111"
        }]
      }
    }
  }
</script>

<style>
  table {
    width: 100%;
    height: 300px;
  }
</style>
